<template>
  <view class="container">
    <view v-for="item in articleData.list" class="article-item" :key="item.id">
      <view class="title">{{ item.title }}</view>
      <view class="intro">{{ item.intro }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import request from "@/utils/request"
import { onPullDownRefresh } from "@dcloudio/uni-app"

const query = ref<any>({
  pageNum: null,
  pageSize: null,
  keyword: "",
  status: "",
})

const articleData = ref<any>({})

async function getData() {
  const { data: res } = await request.post("/article/list", query.value)
  articleData.value = res.data
  // 数据加载完成后，停止下拉刷新动画
  uni.stopPullDownRefresh()
}
getData()

onPullDownRefresh(() => {
  getData()
})
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100vw;
}

.article-item {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  .title {
    font-size: 32rpx;
    font-weight: 700;
  }
  .intro {
    padding-top: 10rpx;
    color: #666;
    line-height: 1.5em;
    text-align: justify;
  }
}
</style>
